// @flow
'use strict';

import React from 'react';
import {
  Text,
  View,
  ART,
  TouchableWithoutFeedback,
} from 'react-native';

import PropTypes from 'prop-types';

const {
  Surface,
  Group,
} = ART;

import * as shape from 'd3-shape';
import AnimShape from '../art/AnimShape';
import Theme from '../theme/index';

const d3 = {
  shape,
};

const margin  = 20;


class Pie extends React.Component {

  static propTypes = {
    height: PropTypes.number,
    width: PropTypes.number,
    pieWidth: PropTypes.number,
    pieHeight: PropTypes.number,
    colors: PropTypes.array,
    onItemSelected: PropTypes.func
  }

  constructor(props: Props) {
    super(props);
    this.state = {highlightedIndex: 0};
  }

  // methods used to tranform data into piechart:

  _value = (item) => {
    return item.number;
  }

  _label = (item) => {
    return item.name;
  }

  _color = (index) => {
    return Theme.colors[index];
  }


  _createPieChart = (index) => {
    //https://github.com/d3/d3-shape/blob/master/README.md#pie_value
    //var data = [
    //   {"number":  4, "name": "Locke"},
    //   {"number":  8, "name": "Reyes"},
    //   {"number": 15, "name": "Ford"},
    //   {"number": 16, "name": "Jarrah"},
    //   {"number": 23, "name": "Shephard"},
    //   {"number": 42, "name": "Kwon"}
    // ];
    //
    // var arcs = d3.pie()
    //     .value(function(d) { return d.number; })
    //     (data);
    //This is similar to mapping your data to values before invoking the pie generator:
    // var arcs = d3.pie()(data.map(function(d) { return d.number; }));
    /**
     * 以上是从github上找到的，下面代码可以理解为，需要画pie，传入this._value，
     * 遍历this.props.data 数组的数据
     * 得到绘制 pie 的数据,即对this.props.data 的再包装，返回的也是数组
     *[{name:"娱乐活动",number:8,endAngle:5.592034923389831,index:3padAngle:0,startAngle:5.0893800988154645,value:8},...]
     */
    const arcs = d3.shape.pie()
      .value(this._value)(this.props.data);

    /**
     * 绘制弧线的方法,即柯里化，返回的是一个函数，下同
     */
    const hightlightedArc = d3.shape.arc()
      .outerRadius(this.props.pieWidth / 2 + 10)
      .padAngle(.05)
      .innerRadius(30);

    const arc = d3.shape.arc()
      .outerRadius(this.props.pieWidth / 2)
      .padAngle(.05)
      .innerRadius(30);

    const arcData = arcs[index];
    const path = (this.state.highlightedIndex === index) ? hightlightedArc(arcData) : arc(arcData);

    console.log(path)
    return {
      path,
      color: this._color(index),
    };
  }

  _onPieItemSelected = (index) => {
    this.setState({
      highlightedIndex: index
    });
    this.props.onItemSelected && this.props.onItemSelected(index);
  }

  render() {
    const x = this.props.pieWidth / 2 + margin;
    const y = this.props.pieHeight / 2 + margin;

    return (
      <View width={this.props.width} height={this.props.height}>
        <Surface width={this.props.width} height={this.props.height}>
          <Group x={x} y={y}>
            {
              this.props.data.map((item, index) =>
                (<AnimShape
                  key={'pie_shape_' + index}
                  color={this._color(index)}
                  d={() => this._createPieChart(index)}
                />)
              )
            }
          </Group>
        </Surface>
        <View style={{position: 'absolute', top: margin, left: 2 * margin + this.props.pieWidth}}>
          {
            this.props.data.map((item, index) => {
              const fontWeight = this.state.highlightedIndex === index ? 'bold' : 'normal';
              return (
                <TouchableWithoutFeedback key={index} onPress={() => this._onPieItemSelected(index)}>
                  <View>
                    <Text style={[styles.label, {
                      color: this._color(index),
                      fontWeight: fontWeight
                    }]}>{this._label(item)}: {this._value(item)}%</Text>
                  </View>
                </TouchableWithoutFeedback>
              );
            })
          }
        </View>
      </View>
    );
  }
}

const styles = {
  label: {
    fontSize: 15,
    marginTop: 5,
    fontWeight: 'normal',
  }
};

export default Pie;
